<template>
  <div>
    <div class="search_nav">
      <van-search
        v-model="value"
        show-action
        @input="onInput"
        @keydown.enter="onSearch"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
      >
        <template #left>
          <span @click="back" class="iconfont icon-fanhui"></span>
        </template>
        <template #action>
          <van-button @click="onSearch" type="danger" size="small">搜索</van-button>
        </template>
      </van-search>
    </div>

    <div class="isMind" v-show="isMind">
      <p v-for="(item,index) in mind" :key="index" v-html="html(item.title)"></p>
    </div>

    <div v-show="isHistory" class="search_container">
      <h3>搜索热词</h3>
      <div class="hot_search">
        <span v-for="(item,index) in hotWords" :key="index">{{item}}</span>
      </div>
      <h3 class="history_h3">
        历史记录
        <span @click="del" class="iconfont icon-shanchu2"></span>
      </h3>
      <div class="history_search">
        <span v-for="(item,index) in history" :key="index">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isHistory: true,
      isMind: false
    };
  },
  created() {
    this.$store.dispatch("getData");
  },
  methods: {
    html(val) {
        var ss = val.replace(this.value,`<font style="color:red">${this.value}</font>`);
        return ss;
    },
    back() {
      window.history.back();
    },
    onSearch() {
      this.$store.dispatch("onSearch", this.value);
      this.value = "";
      this.$router.push("/goods");
    },
    //当输入框内容发生改变时
    onInput() {
      this.isHistory = false;
      this.isMind = true;
      this.$store.dispatch("onInput", this.value);
    },
    del() {
        this.$store.dispatch('del')
    }
  },
  computed: {
    hotWords: function() {
      return this.$store.state.hotWords;
    },
    history: function() {
      return this.$store.state.history;
    },
    mind: function() {
      return this.$store.state.mind;
    }
  }
};
</script>

<style scoped>
.search_nav {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  border-bottom: 1px solid lightgrey;
}
.icon-fanhui {
  margin-right: 10px;
}
.search_container {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 60px;
  box-sizing: border-box;
  padding: 0px 10px;
  font-size: 14px;
}
.search_container h3 {
  margin: 10px 0px;
  color: #000;
}
.hot_search {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.hot_search span {
  display: inline-block;
  border: 1px solid lightgrey;
  padding: 5px 10px;
  border-radius: 30px;
  margin: 5px 5px;
  color: #999;
}
.history_search {
  width: 100%;
  /* border: 1px solid red; */
  margin-bottom: 20px;
}
.history_search span {
  display: inline-block;
  border: 1px solid lightgrey;
  padding: 5px 10px;
  border-radius: 30px;
  margin: 5px 5px;
  color: #000;
}
.history_h3 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px !important;
}
.isMind {
  width: 100%;
  height: 800px;
  background-color: white;
  margin-top: 60px;
}
.isMind p {
    width: 100%;
    line-height: 40px;
    border-bottom: 1px solid lightgrey;
    box-sizing: border-box;
    padding: 0px 15px;
    font-size: 14px;
}
</style>